<template>
    <div ref="chart" class="c"></div>
  </template>
  
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import emitter from '../../plugins/Bus';

// 定义一个引用来访问DOM元素
const chart = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;
// 存储不同产线的数据
const chartOptions = {
  '产线1': {
    xAxis: {
      type: 'category',
      data: ['工位1', '工位2', '工位3']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224],
        type: 'bar',
        label: {
        show: true,  // 显示标签
        position: 'top',  // 标签位置，'top'表示在柱状图上方
        valueAnimation: true, // 动画效果
        fontSize: 14,  // 设置字体大小
        color: 'white'  // 设置字体颜色
      }
      }
    ]
  },
  '产线2': {
    xAxis: {
      type: 'category',
      data: ['工位1', '工位2', '工位3']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [32, 100, 28],
        type: 'bar', 
        label: {
        show: true,  // 显示标签
        position: 'top',  // 标签位置，'top'表示在柱状图上方
        valueAnimation: true, // 动画效果
        fontSize: 14,  // 设置字体大小
        color: 'white'  // 设置字体颜色
      }
      }
    ]
  }
};

onMounted(() => {
if (chart.value) {
    // 在mounted生命周期中初始化ECharts
    myChart = echarts.init(chart.value, 'dark');
    }
});

emitter.on('line-selected', (line: string) => {
  if (myChart && line) {
    myChart.setOption(chartOptions[line]); // 更新图表
  }
});

</script>
  
<style scoped>
 .c {
    width: 1200px;
    height: 620px;
  }
</style>